<template>
<Header titleName="管理收货地址" functionName="新增" @handleFuncClick="accessAdd" @handleBackClick="handleBackMineClick"/>
 <div class="content">
     <div class="content_title">
我的收货地址
     </div>
     <div class="content_wrapper">
         <div class="content_wrapper_name">
小慕
         </div>
         <div class="content_wrapper_phone">
18911023261
         </div>
         <div class="content_wrapper_address">
北京市海淀区西三环北路 2号院 北京理工大学 国防科技园2号楼 10层 
         </div>
         <div class="content_wrapper_access iconfont" @click="accessEdit">
&#xe643;
         </div>
     </div>
          <div class="content_wrapper">
         <div class="content_wrapper_name">
小慕
         </div>
         <div class="content_wrapper_phone">
18911023261
         </div>
         <div class="content_wrapper_address">
北京市海淀区西三环北路 2号院 北京理工大学 国防科技园2号楼 10层 
         </div>
         <div class="content_wrapper_access iconfont">
&#xe643;
         </div>
     </div>
 </div>
</template>
<script>
import Header from './Header.vue'
import { useRouter } from 'vue-router'
export default{
    components: {Header},
    setup() {
        const router = useRouter()
        const accessAdd = () => {
            router.push({ name: 'AddAddress' })
        }
        const accessEdit = () => {
            router.push({ name: 'EditAddress' })
        }
        const handleBackMineClick = () => {
            router.push({ name: 'Mine' })
        }
        return { accessAdd, accessEdit, handleBackMineClick }
    },
}
</script>
<style scoped lang="scss">

.content{
    background: #F8F8F8;
    position: absolute;
    top: .44rem;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: .32rem;

    &_title{
        position: absolute;
        top: .16rem;
        left: .18rem;
        font-size: .14rem;
        color: #333;
    }
    &_wrapper{
        margin:.16rem .18rem;
        width: 3.39rem;
        height: 1.04rem;
        background: #fff;
        border-radius: .04rem;
        position: relative;
        &_name{
            font-size: .14rem;
            color: #999;
            position: absolute;
            top: .18rem;
            left: .18rem;
        }
        &_phone{
            color: #999;
            text-align: center;
            position: absolute;
            top: .18rem;
            left: 1.1rem;
            line-height: .2rem;
        }
        &_address{
            position: absolute;
            top: .46rem;
            left: .16rem;
            font-size: .14rem;
            color: #333;
            width: 2.6rem;
            height: auto;
        }
        &_access{
            position: absolute;
            right: .16rem;
            top: 50%;
            transform: translateY(-50%);
            color:#999;
        }
    }
}
</style>